<template>
	<div style="width:100%;">
		下单
		<el-row :gutter="20" v-for="x in data.goods" :key="x.bookid" style="background-color: aliceblue;">
		<el-col :span="6" :offset="3">
		  <el-card class="shadow-md transition-transform hover:scale-210">
		      <div class="w-10vw h-11vw">
		        <img :src="`/api/public/findgoodsimg/${x.gid}`" class="h-full w-full image-zoom" />
		      </div>
		  </el-card>
		</el-col>
		<el-col :span="6" :offset="1">
		<div class="p-4">
		      <h1 class="text-sm mb-2 image-zoom">{{ x.bookname }}</h1>
		      <div class="flex justify-between items-center">
		        <h3 style="color: red;">原价: {{ x.price }}￥</h3>
		        <h3 style="color: red;">会员价: {{ x.vip }}￥</h3>
		        <p class="text-gray-500 text-sm">{{ x.reviews }} 人评价</p>‌‌
		      </div>
			  <div style="display:inherit">
			  	<el-input-number v-model="data.num1" size="large" />&nbsp;
				<el-button type="primary">添加购物车</el-button>
				<el-button type="primary">立即购买</el-button>
			  </div>
		    </div>	
		</el-col>
		</el-row>
	</div>

</template>

<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { $get, $postx, $postf } from "../../ajax/index.js";
import myalert from "../../utils/myalert.js";
import alert from "../../components/Alert.vue";
import store from "../../store/index.js";
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
	const data=reactive({
		goods:[],
		num1:1,
	})
	
	const route = useRoute()
	onMounted(()=>{
	console.log(route.query.id)
	$get('/api/adm/goods/findonekid/'+route.query.id)
	.then((resp)=>{
		console.log(resp.data.data)
		data.goods=resp.data.data;
	})
	})
</script>

<style>
</style>
